<template>
	<view>
		<view class="" style="display: flex;padding: 0upx 200upx; color: #ccc;justify-content: space-around;padding-top: 20upx;background-color: #fff;">
			<view :class="{active:isActive}" @click="Aclick">
				可用
			</view>
			<view :class="{active:isActive1}" @click="Aclick1">
				可领取
			</view>
		</view>
		<view class="mask-content" v-show="isshow">
			<!-- 优惠券页面，仿mt -->
			<view style="padding: 30upx;padding-left: 80upx;background-image: url(../../../static/heibian.png);background-position: 0px 0px;background-repeat:no-repeat;background-size:30upx 200upx;" class="coupon-item" v-for="(item,index) in couponList" :key="index">
				
				<view class="con">
					<view class="left" style="color: #FF6701;display: flex;width: 600upx;">
						<view class="title" style="font-size: 48upx;margin-right: 30upx;">{{item.price}}</view>
					</view>
					<view class="">
						<image style="width: 30upx;height: 30upx;right: -550upx;top: -40upx;" src="../../../static/xuanzhong.png"></image>
					</view>
					<view class="right">
						<text>{{item.coupon_name}}</text>
					</view>
					<view class="circle l"></view>
					<view class="circle r"></view>
				</view>
				<text class="tips" style="color: #909090;border-top: 1upx dashed #909090;margin-top: -35upx;"><text class="time">有效期{{item.use_start_time.substring(0,10)}}~{{item.use_end_time.substring(0,10)}}</text></text>
				
			</view>
		</view>
		
		<view class="mask-content" v-show="isshow1">
			<view style="padding: 30upx;padding-left: 80upx;background-image: url(../../../static/heibian.png);background-position: 0px 0px;background-repeat:no-repeat;background-size:30upx 200upx;" class="coupon-item" v-for="(item,index) in couponList1" :key="index" @click="getcoupon(item.id)">
				<view class="con">
					<view class="left" style="color: #FF6701;">
						<text class="title" style="font-size: 48upx;margin-right: 30upx;">{{item.price}}</text>
					</view>
					<view class="">
						<image style="width: 30upx;height: 30upx;right: -550upx;top: -40upx;" src="../../../static/xuanzhong.png"></image>
					</view>
					<view class="right">
						<text class="price">{{item.coupon_name}}</text>
					</view>
					<view class="circle l"></view>
					<view class="circle r"></view>
				</view>
				<text class="tips" style="color: #909090;border-top: 1upx dashed #909090;margin-top: -35upx;"><text class="time">有效期{{item.use_start_time.substring(0,10)}}~{{item.use_end_time.substring(0,10)}}</text></text>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow1: false,
				isshow: true,
				isActive : true,
				isActive1 : false,
				user_id:'',
				couponList: [],
				couponList1: [],
				coupon_id:'',
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../index/index'
					});
				}
			});
		},
		methods:{
			// 可用优惠券列表
			setAjax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Coupon/myCouponList',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						this.couponList = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			// 可领取列表
			setAjax1(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Coupon/mayGetCouponList',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						this.couponList1 = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			getcoupon (id) {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Coupon/getCoupon',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						user_id: this.user_id,
						coupon_id: id,
						session_id: uni.getStorageSync("sessionid")
					},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							let o = this
							setTimeout(function() {
								o.setAjax1()
							}, 1500);
						}
					},
					fail: () => {},
					complete: () => {}
				});
				uni.showLoading()
				uni.hideLoading()
			},
			Aclick : function(){
				this.isshow1 = false
				this.isshow = true
				this.isActive = true
				this.isActive1 = false
				this.setAjax()
			},
			Aclick1 : function(){
				this.isshow1 = true
				this.isshow = false
				this.isActive = false
				this.isActive1 = true
				this.setAjax1()
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style lang="scss">
	.active {
	 border-bottom: 5upx solid #000;
	 color: #000;
	}
	
	/* 优惠券列表 */
	.coupon-item{
		display: flex;
		flex-direction: column;
		margin: 40upx 24upx;
		height: 200upx;
		border-radius: 20upx;
		box-shadow: 1upx 1upx 10upx #DDDDDD;
		background: #fff;
		.con{
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;
			&:after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				// border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}
		.title{
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}
		.time{
			font-size: 24upx;
			color: $font-color-light;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}
		.price{
			font-size: 44upx;
			color: $base-color;
			&:before{
				content: '￥';
				font-size: 34upx;
			}
		}
		.tips{
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}
		.circle{
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r{
				left: auto;
				right: -6upx;
			}
		}
	}
</style>
